<template>
  <div class="player-bar" v-show="this.$store.state.showPlayerBar">
    <BackgroundBox></BackgroundBox>
    <div class="bot-container">
      <div class="music-pic">
        <div class="pic-box">
          <img :src="this.$store.state.playerData.image + '?param=100y100' " alt=" ">
        </div>
      </div>
      <div class="music-info">
          <p class="m-name"> {{this.$store.state.playerData.name}} </p>
          <p class="art">{{this.$store.state.playerData.artist}}</p>
      </div>
      <div class="playing-list" @click="closePlayerBar">
        <i class="iconfont icon-menu"></i>
      </div>
      <div class="is-play" @click="togglePlayState">
        <i class="iconfont icon-zanting" v-if="this.$store.state.isPlay"></i>
        <i class="iconfont icon-zanting1" v-else></i>
      </div>
    </div>
  </div>
</template>


<script>
import BackgroundBox from '@/components/BackgroundBox'

export default {
  methods: {
    togglePlayState(){
      this.$store.commit("toggleMusic");
    },
    closePlayerBar(){
      this.$store.commit("hidePlayerBar");
    }
  },
  components: {
    BackgroundBox
  }
};
</script>


<style lang="scss" scoped>
.player-bar {
  position: fixed;
  z-index: 2;
  bottom: 0;
  background-color: rgba($color: #000000, $alpha: 0.15);
  width: 100%;
  height: 60px;
  overflow: hidden;
  .music-pic {
    float: left;
    width: 60px;
    height: 100%;
    padding: 6px;
    .pic-box {
      
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #666666;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .music-info {
    float: left;
    overflow: hidden;
    padding: 5px 0px;
    height: 100%;
    width: calc(100% - 190px);
    text-align: left;
    text-indent: 1em;
    text-overflow: ellipsis;
    white-space: nowrap;
    .m-name{
        color: #eeeeee;
        line-height: 25px;
        font-size: 16px;
    }
    .art{
        color: #dddddd;
        line-height: 14px;
        font-size: 14px;
    }
  }
  .playing-list, .is-play{
    color: #eeeeee;
    float: right;
    width: 40px;
    height: 100%;
    .iconfont{
        line-height: 60px;
        font-size: 24px;
    }
  }
}
.bot-container{
  position: relative;
  // z-index: 2;
  width: 100%;
  height: 100%;
}
</style>
